<template>
  <div class="home">
    <h1>江子辰</h1>
    <div id="he">
      <ul>
        <li>春</li>
        <li>风</li>
        <li>十</li>
        <li>里</li>
        <li>❤</li>
        <li>都</li>
        <li>不</li>
        <li>如</li>
        <li>你</li>
      </ul>
      <!-- <div class="name">致黎维瑜</div> -->
    </div>
    <button @click="()=>{this.$router.push('/about')}">切换</button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
};
</script>


<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.home {
  width: 100%;
  background-image: url("../../public/img/314762.jpg");
  background-size: 100% 100%;
  // background-repeat: no-repeat;
}
@media screen and (max-width: 500px) {
  .home {
  background-image: url("../../public/img/1 (2).jpg");
  background-size: 140% 100%;
  }
  button{
    left:38% !important;
  }
}
button{
  width: 100px;
  height: 50px;
  position: fixed;
  bottom: 30%;
  left: 47%;
 background-color: rgba(245, 240, 240, 0.1);
  border: 1px solid #fff;
  outline:none;
  color: #fff;
}
h1{
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  font-family: "华文行楷";
  text-shadow: 5px 5px 5px #000000;
  font-size: 3vw;
  color: #fff;
}
#he {
  /* width: 100%; */
  display: flex;
  /*弹性盒模型*/
  justify-content: center;
  /*主轴方向居中显示*/
  align-items: center;
  /*交叉轴方向居中显示*/
  height: 100vh;
  background-color: rgba(245, 240, 240, 0.5);
}

// ul {
//   height: 200px;
// }

li {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin-right: 10px;
}

li:nth-child(1) {
  background-color: #f62e74;
  animation: love1 4s infinite;
}

li:nth-child(2) {
  background-color: #f45330;
  animation: love2 4s infinite;
  animation-delay: 0.15s;
}

li:nth-child(3) {
  background-color: #ffc883;
  animation: love3 4s infinite;
  animation-delay: 0.3s;
}

li:nth-child(4) {
  background-color: #30d268;
  animation: love4 4s infinite;
  animation-delay: 0.45s;
}

li:nth-child(5) {
  background-color: #006cb4;
  animation: love5 4s infinite;
  animation-delay: 0.6s;
}

li:nth-child(6) {
  background-color: #784697;
  animation: love4 4s infinite;
  animation-delay: 0.75s;
}

li:nth-child(7) {
  background-color: #ffc883;
  animation: love3 4s infinite;
  animation-delay: 0.9s;
}

li:nth-child(8) {
  background-color: #f45330;
  animation: love2 4s infinite;
  animation-delay: 1.05s;
}

li:nth-child(9) {
  background-color: #f62e74;
  animation: love1 4s infinite;
  animation-delay: 1.2s;
}

@keyframes love1 {
  30%,
  50% {
    height: 60px;
    transform: translateY(-30px);
  }

  75%,
  100% {
    height: 20px;
    transform: translateY(0);
  }
}

@keyframes love2 {
  30%,
  50% {
    height: 125px;
    transform: translateY(-62.5px);
  }

  75%,
  100% {
    height: 20px;
    transform: translateY(0);
  }
}

@keyframes love3 {
  30%,
  50% {
    height: 160px;
    transform: translateY(-75px);
  }

  75%,
  100% {
    height: 20px;
    transform: translateY(0);
  }
}

@keyframes love4 {
  30%,
  50% {
    height: 180px;
    transform: translateY(-60px);
  }

  75%,
  100% {
    height: 20px;
    transform: translateY(0);
  }
}

@keyframes love5 {
  30%,
  50% {
    height: 190px;
    transform: translateY(-45px);
  }

  75%,
  100% {
    height: 20px;
    transform: translateY(0);
  }
}

#he ul li {
  text-align: center;
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.name {
  /* border: 1px solid red; */
  width: 50%;
  height: 200px;
  position: absolute;
  font-size: 40px;
  letter-spacing: 10px;
  font-weight: 900;
  text-align: center;
  left: 25%;
  background-image: -webkit-linear-gradient(
    left,
    rgb(183, 80, 247),
    rgb(11, 255, 235)
  );
  // -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
